<template>
  <div class="view-container">
    <header-module
      :title="titleName"
      :left-custom="false"
      padding
    >
      <template #btn>
        <el-button
          class="border-btn"
          size="small"
          @click="back"
        >返回</el-button>
        <el-button
          class="main-btn"
          size="small"
          type="primary"
          :loading="btnLoading"
          @click="submit"
        >提交审核</el-button>
      </template>
    </header-module>
    <div class="main-content">
      <item-title title="基本信息" />
      <create-base-info
        ref="baseInfoRef"
        :detail="detailData"
        :types="types"
      />
      <item-title title="资质信息" />
      <cert
        ref="certRef"
        :detail="detailData"
        :types="types"
      />
    </div>
  </div>
</template>

<script>
import {
  defineAsyncComponent,
  defineComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  ref,
  toRefs,
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import getPageTitle from '@/utils/page'

export default defineComponent({
  components: {
    createBaseInfo: defineAsyncComponent(() =>
      import('../../modules/createBaseInfo.vue')
    ),
    cert: defineAsyncComponent(() => import('../../modules/cert.vue')),
  },
  setup(props, context) {
    const router = useRouter()
    const route = useRoute()
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    const baseInfoRef = ref(null)
    const certRef = ref(null)
    var reactiveData = reactive({
      id: route.query.distributorId ? Number(route.query.distributorId) : 0,
      types: route.query.types,
      detailData: null,
      btnLoading: false,
      titleName: '新建配送商',
    })
    const back = () => {
      router.back()
    }
    const getDetail = () => {
      api.distributors
        .DISTRIBUTORS_DETAIL({ id: reactiveData.id })
        .then((res) => {
          if (res.code === 0) {
            reactiveData.detailData = res.data.DistributeInfo
          }
        })
    }
    const create = (data) => {
      reactiveData.btnLoading = true
      api.distributors.DISTRIBUTORS_CREATE(data).then((res) => {
        if (res.code === 0) {
          console.log('创建成功')
          currentInstance.proxy.customMessage({
            type: 'success',
            message:
              '<配送商审批>已提交，可在[流程审批-我发起的]查看审批进程。',
          })
          router.back()
        } else {
          currentInstance.proxy.customMessage({
            type: 'error',
            message: res.msg,
          })
          reactiveData.btnLoading = false
        }
      })
    }
    const edit = (data) => {
      reactiveData.btnLoading = true
      api.distributors.DISTRIBUTORS_EDIT(data).then((res) => {
        if (res.code === 0) {
          console.log('编辑成功')
          currentInstance.proxy.customMessage({
            type: 'success',
            message: '编辑成功',
          })
          router.back()
        } else {
          currentInstance.proxy.customMessage({
            type: 'error',
            message: res.msg,
          })
          reactiveData.btnLoading = false
        }
      })
    }
    const update = (data) => {
      reactiveData.btnLoading = true
      api.distributors.DISTRIBUTORS_UPDATE(data).then((res) => {
        if (res.code === 0) {
          console.log('修改成功')
          currentInstance.proxy.customMessage({
            type: 'success',
            message: '修改成功',
          })
          router.back()
        } else {
          currentInstance.proxy.customMessage({
            type: 'error',
            message: res.msg,
          })
          reactiveData.btnLoading = false
        }
      })
    }
    const submit = () => {
      var formData = {}
      var basePass = false
      baseInfoRef.value.baseInfoValidate((valid) => {
        if (valid) {
          basePass = true
          formData = baseInfoRef.value.baseInfo
        } else {
          basePass = false
          return false
        }
      })
      if (!basePass) {
        return
      }
      const cert = certRef.value.getFileData()
      console.log(cert)
      if (cert.bol) {
        formData.qualifications = cert.files
      } else {
        return
      }

      if (reactiveData.types === 'create') {
        create(formData)
      } else if (reactiveData.types === 'edit') {
        edit(formData)
      } else if (reactiveData.types === 'update') {
        update(formData)
      }
    }
    onMounted(() => {
      if (reactiveData.types === 'create') {
        reactiveData.titleName = '新建配送商'
      } else if (reactiveData.types === 'edit') {
        reactiveData.titleName = '编辑配送商'
      } else if (reactiveData.types === 'update') {
        reactiveData.titleName = '变更配送商信息'
      }
      document.title = getPageTitle(reactiveData.titleName, 2)
      if (reactiveData.id) {
        getDetail()
      }
    })

    return {
      baseInfoRef,
      certRef,
      ...toRefs(reactiveData),
      back,
      submit,
    }
  },
})
</script>

<style lang="scss" scoped>
.item-container {
  margin-top: 20px;
}
</style>

